<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script src = "js/multiValDivChange.js"></script>
    <script>
        //

        window.onload = function () {
            let oDiv = document.getElementById('div1');
            let oBtn = document.getElementById('btn1');


            console.log(oDiv.style.height === '');
            console.log(oDiv.style.width);
            oBtn.onclick = function () {
                //使用运动框架
                multiValDivChange(
                    oDiv,
                    {
                        height : 600,
                        width : 200,
                        opacity : 0.2
                    },
                    function () {
                        multiValDivChange(oDiv,{height:50,width:50,opacity:1})
                    },
                    20
                )
            }
        }

        //不足点:
        //没想明白定时器与内层遍历的关系,分不清谁在内层
        //一个定时器实质是只对应一个运动的对象,而不是一个对象中的一个运动属性
        //想明白这点后,所以定时器在外层,内层再循环n个需要改变的属性

        //内部循环的属性每次都会发生变化,每次的当前值都需要从对象本身或者别的地方获取(currentVal)
        //如果使用传入而不是让函数自己去获取时,需要注意传入的属性值会发生变化,对于多个属性会有不同的结果,提升作用域会变得非常困难



    </script>

    <style>
        #div1 {
            background: sienna;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>

<div>
    <input type = "button" value="change" id="btn1">
    <div id="div1">

    </div>

</div>

</body>
</html>